<template>
  <CommonCard title="今日交易用户数" value="182,425">
    <div ref="barChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <div class="footer">
        <span>退货率</span>
        <span class="emphasis">5.91%</span>
      </div>
    </template>
  </CommonCard>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import CommonCard from "./CommonCard.vue";
import type { EChartsType } from "echarts";
let myChart: EChartsType;

// 获取真实dom对象
let barChartRef = ref();

let getOption = () => {
  return {
    xAxis: {
      show: false,
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
        type: "bar",
      },
    ],
  };
};

// 组件挂载时实现动态效果
onMounted(() => {
  // 初始化echarts对象
  myChart = echarts.init(barChartRef.value, "dark");
  // 获取serice里面的配置的内容进行图形渲染
  myChart.setOption(getOption());

  window.addEventListener("resize", () => {
    myChart && myChart.resize();
  });
});
</script>

<style></style>
